<template>
    <el-tabs 
      v-model="activeTab" 
      type="border-card" 
      closable 
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <component :is="tab.component" />
      </el-tab-pane>
    </el-tabs>
    
    <el-button @click="addTab">添加配置项</el-button>
  </template>
  
  <script setup>
  import { ref, markRaw, defineAsyncComponent } from 'vue'
  
  // 标签页数据
  const tabIndex = ref(1)
  const tabs = ref([
    {
      label: '基础配置',
      name: 'base',
      component: markRaw(defineAsyncComponent(() => import('./BaseConfig.vue')))
    }
  ])
  
  const activeTab = ref('base')
  
  const addTab = () => {
    const newTab = {
      label: `配置项`,
      name: `tab${tabIndex.value}`,
      component: markRaw(defineAsyncComponent(() => import('./BaseConfig.vue')))
    }
    tabs.value.push(newTab)
    activeTab.value = newTab.name
    tabIndex.value++
  }
  
  const removeTab = (targetName) => {
    const currentTabs = tabs.value
    let activeName = activeTab.value
  
    if (activeName === targetName) {
      currentTabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = currentTabs[index + 1] || currentTabs[index - 1]
          activeName = nextTab?.name || ''
        }
      })
    }
  
    activeTab.value = activeName
    tabs.value = currentTabs.filter(tab => tab.name !== targetName)
  }
  </script>
  
  <style scoped>
  /* 可根据需要添加样式 */
  </style>